<template>
    <PageWrapper title="审核列表">
        <div class="content p-4">
            <!-- 表格 -->
            <BasicTable @register="registerTable">
                <Spin :spinning="loading" tip="加载中..." />
                <template #uid="{ text }">
                    {{ text.username }}
                </template>
                <template #content="{ text }">
                    {{ text ?? '未填写' }}
                </template>
                <template #phone="{ text }">
                    {{ text ?? '未填写' }}
                </template>
                <template :style="'overflow: hidden;width:120px'" #object="{ text }">
                    {{ text ? text.title : '无' }}
                </template>
                <template #type="{ text }">
                    <Tag v-if="text === 'Video'" color="volcano">视频</Tag>
                    <Tag v-if="text === 'Comment'" color="yellow">评论</Tag>
                    <Tag v-else-if="text === 'User'" color="green">平台</Tag>
                </template>
                <template #faultType="{ record }">
                    <div v-if="record.faultType === '1' && record.type === 'User'"> 用户反馈 </div>
                    <div v-else-if="record.faultType === '1' && record.type !== 'User'">
                        违法违规
                    </div>
                    <div v-else-if="record.faultType === '2' && record.type !== 'User'">
                        低俗色情
                    </div>
                    <div v-else-if="record.faultType === '3' && record.type !== 'User'">
                        广告诈骗
                    </div>
                    <div v-else-if="record.faultType === '4' && record.type !== 'User'">
                        未成年不良信息
                    </div>
                    <div v-else-if="record.faultType === '5' && record.type !== 'User'">
                        内容质量差
                    </div>
                    <div v-else-if="record.faultType === '6' && record.type !== 'User'">
                        侵权投诉
                    </div>
                    <div v-else> 其他问题 </div>
                </template>
                <template #createdAt="{ text }">
                    {{ text.substring(0, 10) }}
                </template>
                <template #status="{ text }">
                    <Tag v-if="text == 1" color="volcano">待处理</Tag>
                    <Tag v-else color="green">已处理</Tag>
                </template>
                <!-- 操作 -->
                <template #action="{ record }">
                    <TableAction
                        v-if="record.status === 1"
                        :actions="[
                            {
                                label: '处理',
                                icon: 'noto-adhesive-bandage',
                                popConfirm: {
                                    title: '是否已经处理该反馈?',
                                    okText: '是',
                                    cancelText: '否',
                                    confirm: () => tableActionClick(record),
                                },
                            },
                            {
                                label: '删除',
                                icon: 'noto:multiply',
                                popConfirm: {
                                    title: '确定要删除吗?',
                                    okText: '确定',
                                    cancelText: '取消',
                                    confirm: () => deleteTableEvent(record),
                                },
                            },
                        ]"
                    />
                </template>
            </BasicTable>
        </div>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import { Tag, message, Spin } from 'ant-design-vue'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { dataListApi, deleteApi, checkApi } from '../../../api/maintenance/index'
    import { PageWrapper } from '/@/components/Page'
    import { DataItem, DataListParams, DeleteParams, CheckParams } from '/@/api/maintenance/model'
    import { Columns, FormConfig } from './model/model'

    export default defineComponent({
        name: 'ReportList',
        components: { BasicTable, TableImg, Tag, TableAction, PageWrapper, Spin },
        setup() {
            // 表格
            const [registerTable, { reload }] = useTable({
                title: '反馈列表',
                titleHelpMessage: '展示反馈列表',
                canResize: true,
                useSearchForm: true,
                bordered: true,
                rowKey: '_id',
                ellipsis: true,
                showTableSetting: true,
                formConfig: FormConfig as any,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 200,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await dataListApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        _id: pageData._id ?? '',
                        faultType: pageData.faultType ?? '',
                        page: pageData.page,
                        limit: pageData.pageSize,
                    }
                    return data
                },
                columns: Columns,
            })
            const loading = ref(false)
            const tableActionClick = async (v: DataItem) => {
                loading.value = true
                const data: CheckParams = {
                    _id: v._id,
                    status: 2,
                }
                const res = await checkApi(data)
                loading.value = false
                console.log(res)
                if (res) {
                    message.success('操作成功!')
                    reload()
                } else {
                    message.error('操作失败!')
                }
                reload()
            }

            const deleteTableEvent = async (v: DataItem) => {
                loading.value = true
                const data: DeleteParams = {
                    _id: v._id,
                }
                const res = await deleteApi(data)
                loading.value = false
                console.log(res)
                if (res) {
                    message.success('删除成功!')
                    reload()
                } else {
                    message.error('删除失败!')
                }
                reload()
            }

            return {
                registerTable,
                tableActionClick,
                deleteTableEvent,
                loading,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
